<template>
    <h2 style="align-items: center;">仓库信息</h2>
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="form.addWarehouseDTO" :rules="rules" label-width="auto"
        class="demo-ruleForm" :size="formSize" status-icon>
        <table>
            <tr>
                <td>
                    <el-form-item label="仓库编号" prop="wNumber">
                        <el-input v-model="form.addWarehouseDTO.wNumber" :disabled="true" />
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="仓库名称" prop="wName">
                        <el-input v-model="form.addWarehouseDTO.wName" />
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td>
                    <el-form-item label="所属类别">
                        <el-input v-model="form.wTypes" @dblclick="dialogProductTypeSelect = true" placeholder="双击选择仓库类别" />
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="仓库地址" prop="wAddress">
                        <el-input v-model="form.addWarehouseDTO.wAddress" />
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <el-form-item label="备注">
                        <el-input v-model="form.addWarehouseDTO.warehouseRemark" type="textarea" />
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        保存
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                </el-form-item>
            </tr>
        </table>
    </el-form>




    <!-- 新增产品分类时双击上级类别弹出选择产品分类的弹窗 -->
    <el-dialog v-model="dialogProductTypeSelect" title="仓库分类选择" width="500" :before-close="ProductTypeSelectOver">
        <template #footer>
            <div class="dialog-footer">
                <el-table :data="tableData" border style="width: 100%" @selection-change="ProductsTypeChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="value" label="序号" />
                    <el-table-column prop="label" label="仓库分类名称" />
                </el-table>
                <el-button @click="dialogProductTypeSelectOver()">确定</el-button>
            </div>
        </template>
    </el-dialog>

</template>
<script setup lang="ts">
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
} from '@element-plus/icons-vue'
import { onMounted, ref, reactive } from "vue";
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import http from '../../../http.js'
import axios from "axios";
const route = useRoute();
const router = useRouter();
var dates = new Date();
const form = reactive({
    wTypes:'',
    "addWarehouseDTO": {
        "wNumber": "",
        "wType": "",
        "wName": "",
        "wAddress": "",
        "warehouseRemark": "",
        "addName": "",
        "addTime": dates,
        "isDel": false,
        "office_Id": "",
        "user_Id": 0
    }
})
onMounted(() => {
    generateRandomNumber();
})
//随机数
const generateRandomNumber = () => {
    const a = Math.floor(100000 + Math.random() * 900000); // 生成一个 6 位的随机数
    sessionStorage.setItem('Vendor', JSON.stringify(a));
    form.addWarehouseDTO.wNumber = String(a);
}
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const locationOptions = ['Home', 'Company', 'School']
const rules = reactive<FormRules>({
    wNumber: [
        { required: true, message: '请输入仓库编号', trigger: 'blur' },
    ],
    wName: [
        { required: true, message: '请输入仓库名称', trigger: 'blur' },
    ],
    // wType: [
    //     { required: true, message: '请选择仓库类别', trigger: 'blur' },
    // ],
    wAddress: [
        { required: true, message: '请输入仓库地址', trigger: 'blur' },
    ]
})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            axios.post(http.zblnb+'/erpck/api/Warehouse/WarehouseAdd', {
                addWarehouseDTO: form.addWarehouseDTO
            }).then((res) => {
                if (res.data.data > 0) {
                    ElMessage.success('添加成功')
                    router.push('/ShowWarehouse')
                } else {
                    ElMessage.error('添加失败')
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    location.reload();
}
const tableData=ref([])

onMounted(()=>{
    WarehouseTypeSelect();
})
//弹出层显示仓库分类信息
const WarehouseTypeSelect = () => {
    axios.get(http.zblnb+'/erpck/api/WareType/GetWareTypeSelectList').then((res) => {
        tableData.value = res.data.data
    })
    console.log(tableData.value)
}

// 新增产品分类下拉弹出层
const dialogProductTypeSelect = ref(false)
//新增产品分类下拉弹出层关闭弹出层
const ProductTypeSelectOver = (done: () => void) => {
    ElMessageBox.confirm('确认关闭吗?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}
//表格多选获取值
const ProductTypeSelectChangeInfo = ref([])
const ProductsTypeChange = (val: any) => {
    ProductTypeSelectChangeInfo.value = val[0]
}
//关闭弹出层后，反填产品分类上级名称
const dialogProductTypeSelectOver = () => {
    form.wTypes=ProductTypeSelectChangeInfo.value.label
    form.addWarehouseDTO.wType=ProductTypeSelectChangeInfo.value.value
    dialogProductTypeSelect.value = false
}
</script>